<template>
	<view class="box-content inner-content">
		<view class="order-content">
			<view class="content-title">
				{{scenicAreaData.scenicName}}
			</view>
			<view class="min-choose-date">
				<view>选择日期</view>
				<view class="place-text">请先选择日期</view>
			</view>
			<view class="date-list" v-if="ticketsData.priceCalendar">
				<view v-if="ticketsData.priceCalendar[index]" :class="currentDate == index?'item-date select-date':'item-date'" v-for="(item,index) in 3"
					:key="index" @click="chooseDate(index)">
					<view class="time-flex" v-if="ticketsData.priceCalendar[index]">
						<view>{{ticketsData.priceCalendar[index].week}}</view>
						<view>{{ticketsData.priceCalendar[index].date | interceptionDate}}</view>
					</view>
					<view class="price" v-if="ticketsData.priceCalendar[index]">¥{{ticketsData.priceCalendar[index].settlePrice}}</view>
				</view>
				<view></view>
				<view v-if="currentDate == 3" :class="currentDate == 3?'item-date select-date':'item-date'"
					:key="3" @click="chooseDate(3)">
					<view class="time-flex">
						<!-- <view>{{travelDate.day}}号</view> -->
						<view>{{travelDate.date | interceptionDate}}</view>
					</view>
					<view class="price">{{travelDate.price}}</view>
				</view>
				<view class="more-date" @click="tomore">
					<view>更多</view>
					<image src="../../static/search/more.png" mode=""></image>
				</view>
			</view>
			<view class="min-title">
				<view>{{ticketsData.productName}}</view>
			</view>
			<view class="min-hint" v-for="(item,index) in ticketsData.bookNotice" :key="index">
				<rich-text :nodes="item.value"></rich-text>
			</view>
			<view class="min-hint">
				<view>{{ticketsData.refundTypeShowText}}</view>
				<view class="lines"></view>
				<view>{{scenicAreaData.isNeedGetTicket?'需取票':'无需取票'}}</view>
				<view class="lines"></view>
				<view style="color: #6985C2;" @click="toLink">预订须知</view>
				<uni-icons style="font-size: 24rpx;" color="#6985C2" type="right" size="28"></uni-icons>
				<view class="number-box">
					<uni-number-box :min="1" :max="ticketsData.maxBuyCount" v-model="nums"
						@change="inputChange"></uni-number-box>
				</view>
			</view>
		</view>
		<view class="order-content" style="padding: 20rpx 30rpx;" v-if="ticketsData.contactInfoType >0">
			<view class="min-title">
				<view>需填{{nums}}位游客</view>
				<view class="add-tourist" @click="add">
					+
				</view>
			</view>
			<view class="tourist-list">
				<view class="item-tourist" v-for="(item,index) in peopleLists" :key="index">
					<view>
						<view style="font-size: 28rpx;color: #333;font-weight: bold;">{{item.name}}</view>
						<view style="font-size: 24rpx;color: #999;">{{item.cardNo | idCard}}</view>
					</view>
					<view class="" @click.stop="deletePeople(item,index)" style="margin-left: auto;">
						<uni-icons type="trash" color="#8F8F91" size="18"></uni-icons>
					</view>

				</view>
			</view>
		</view>
		<view class="agreement-lines-content">
			<label class="agreement-lines">
				<radio @click="isagre = !isagre" :checked="isagre" style="transform:scale(0.7)" color="#EF5233" />
				<view class="agreement">请仔细<navigator url="/otherpages/agreement/scenicagreement">订购须知</navigator>点击去支付即代表您已阅读并同意条款内容。</view>
			</label>
		</view>
		<view class="price-lines" @click="creatOrder">
			<view class="prcies">
				<text>￥</text>
				{{allPrice}}
			</view>
			<view class="reserve-btn">
				预定
			</view>
		</view>
		
		<uni-popup ref="popupAddTourist" type="bottom">
			<mescroll-item ref="mescrollItem"  @closeaddPage="closeaddPage" :nums="nums" @peoples="touristPeople"></mescroll-item>	
		</uni-popup>
		<uni-popup ref="popupDate" type="bottom">
			<view class="" style="background-color: #fff;">
				<yu-calendar :priceList="ticketsData.priceCalendar" bgColor="#EF5233" color="#fff" @click="datePrice">
				</yu-calendar>
			</view>
		</uni-popup>
		<uni-calendar ref="calendar" :date="todayDate" class="uni-calendar--hook" :clear-date="true" :selected="selected" :startDate="info.startDate"
		 :endDate="info.endDate" :insert="false" :range="false" @confirm="confirm"/>
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
	import publicData from './public.js'
	import bigNumber from '@/common/js/bignumber.js'
	import MescrollItem from '@/components/addTourist/addTourist.vue'
	function getDate(date, AddDayCount = 0) {
			if (!date) {
				date = new Date()
			}
			if (typeof date !== 'object') {
				date = date.replace(/-/g, '/')
			}
			const dd = new Date(date)
	
			dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
	
			const y = dd.getFullYear()
			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
			return {
				fullDate: y + '-' + m + '-' + d,
				year: y,
				month: m,
				date: d,
				day: dd.getDay()
			}
		}
	export default {
		mixins:[MescrollMixin,MescrollCompMixin],
		components: {
			MescrollItem
		},
		data() {
			return {
				isagre: false,
				ticketsData: {},
				scenicAreaData: {},
				currentDate: "0",
				travelDate: '',
				nums: 1,
				contact: {},
				tourists: [],
				allPrice: 0,
				peopleLists: [],
				checkPeople: [],
				info:{},
				selected:[],
				todayDate:""
				
			}
		},
		onLoad() {
			this.scenicAreaData = publicData.scenicAreaData
			this.ticketsData = publicData.ticketsData
			this.allPrice = this.ticketsData.priceCalendar[0].settlePrice
			this.travelDate = this.ticketsData.priceCalendar[0]
			this.todayDate = getDate(new Date(),0).fullDate
			this.setInfo()
		},
		filters: {
			interceptionDate(text) {
				let newStr = text.substring(5);
				return newStr
			},
			idCard(text){
				var aa = text.replace(/(.{6}).*(.{4})/, '$1********$2')
				aa.replace(/^(\d{6})\d{8}(.{4}$)/g, `$1${Array(9).join('*')}$2`)
				return aa
			}
		},
		methods: {
			setInfo(){
				this.info.startDate = publicData.ticketsData.priceCalendar[0].date
				this.info.endDate =  publicData.ticketsData.priceCalendar[publicData.ticketsData.priceCalendar.length-1].date
				publicData.ticketsData.priceCalendar.map(item=>{
					this.selected.push({
						date: item.date,
						info: '￥'+item.settlePrice
					})
				})
			},
			confirm(data){
				if(!data.extraInfo || !data.extraInfo.info){
					this.$util.msg('不可选择')
					return
				}
				for (let i = 0; i < 3; i++) {
					if(this.ticketsData.priceCalendar[i].date == data.fulldate){
						this.currentDate = i
						return
					}
				}
				this.currentDate = 3
				var obj = {
					date:data.fulldate,
					day: data.date,
					price: data.extraInfo.info
				
				}
				this.travelDate = obj
			},
			toLink(){
				uni.navigateTo({
					url:'/otherpages/agreement/roomReservation'
				})
			},
			closeaddPage(){
				this.$refs.popupAddTourist.close()
			},
			touristPeople(data) {
				this.$refs.popupAddTourist.close()
				this.peopleLists = data
			},
			deletePeople(item, index) {
				this.peopleLists.splice(index, 1)
			},
			chooseDate(index){
				this.currentDate = index
				if(index !=3){
					this.travelDate = this.ticketsData.priceCalendar[index]
				}
			},
			datePrice(data) {
				this.currentDate = 3
				data.price = "￥"+data.price
				this.travelDate = data
				
			},
			inputChange(nums) {
				var allPrice = new bigNumber(nums).times(new bigNumber(this.ticketsData.priceCalendar[0].settlePrice))
				this.allPrice = Number(allPrice).toFixed(2)
			},
			add() {
				this.$refs.popupAddTourist.open('bottom')
			},
			people(data) {
			},
			creatOrder() {
				let that = this
				if(!this.isagre){
					this.$util.msg('请勾选订购须知')
					return
				}
				if(this.peopleLists.length != this.nums){
					this.$util.msg('游客信息不完整')
					return
				}
				this.request.httpTokenRequest({
					url: "order/createTicketOrder",
					method: "post"
				}, {
					scenicID: publicData.scenicAreaData.scenicId,
					scenicName: publicData.scenicAreaData.scenicName,
					productName: publicData.ticketsData.productName,
					travelDate: this.travelDate.date, // 日期
					productID: publicData.ticketsData.productId,
					quantity: this.nums,
					contact: JSON.stringify(this.peopleLists[0]),
					tourists:JSON.stringify(this.peopleLists),
					name: this.peopleLists[0].name,
					mobile: this.peopleLists[0].mobile,
					cardType: 1,
					cardNo: this.peopleLists[0].cardNo,
					price: this.allPrice,
					images:publicData.scenicAreaData.images[0],
					drawAddress:publicData.scenicAreaData.scenicAddress
				}).then(res => {
					if (res.code == 0) {
						uni.navigateTo({
							url:'/otherpages/pay/pay?order_id='+res.data.order_id
						})

					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			tomore() {
				this.$refs.calendar.open()
				// this.$refs.popupDate.open('bottom')
			}
		}
	}
</script>

<style lang="scss">
	.inner-content {
		// padding-top: calc(var(--status-bar-height) + 10px);
	}

	.order-content {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 31rpx;
		margin-bottom: 30rpx;
		.content-title {
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: bold;
			color: #2A2B2E;
		}

		.min-choose-date {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #2A2B2E;
			margin: 32rpx 0;

			.place-text {
				width: 160rpx;
				height: 41rpx;
				background: #EBF7FF;
				border-radius: 20rpx 20rpx 20rpx 0rpx;
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #72ADD5;
				text-align: center;
				line-height: 41rpx;
				margin-left: 21rpx;
			}
		}

		.date-list {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			margin-top: 21rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #D5D5D5;
			.item-date {
				width: 118rpx;
				height: 135rpx;
				background: #F4F4F4;
				border-radius: 10rpx;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				text-align: center;
				padding-top: 15rpx;
				box-sizing: border-box;
				margin-right: 10rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				.time-flex{
					display: flex;
					align-items: center;
					font-size: 22rpx;
				}

				.price {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #EF5233;
					
				}
			}

			.select-date {
				border: 1rpx solid #EF5233;
				color: #EF5233;
				background-color: #FDEDEA;
			}

			.more-date {
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #858587;
				text-align: center;
				margin-left: auto;
				image {
					width: 21rpx;
					height: 20rpx;
					margin-top: 8rpx;
				}
			}
		}

		.min-title {
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: bold;
			color: #0F0807;
			padding: 21rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.add-tourist {
				width: 68rpx;
				height: 68rpx;
				background: #E9E9E9;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 300;
				color: #EF5233;
				text-align: center;
				line-height: 68rpx;
				margin-left: auto;
			}
		}

		.min-hint {
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #888889;
			display: flex;
			align-items: center;
			margin-bottom: 14rpx;

			.lines {
				width: 1rpx;
				height: 20rpx;
				border: 1rpx solid #BFBFBF;
				margin: 0 16rpx;
			}

			.number-box {
				margin-left: auto;
			}
		}

		.tourist-list {
			.item-tourist {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #5E5F5F;
				border-bottom: 1rpx solid #DFDFDF;
				line-height: 48rpx;
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				.left-cancel {
					color: #999;
					text-align: center;
					margin-right: 40rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.item-tourist:last-child{
				border: 0;
			}
		}

		.phone {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #5E5F5F;
			margin-top: 50rpx;

			image {
				width: 37rpx;
				height: 36rpx;
			}
		}
	}

	.filter-item {
		display: flex;
		align-items: center;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1rpx solid #DADBDB;

		.filter-item-title {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #5E5F5F;
			width: 170rpx;
			text-align: left;
		}

		.input-place-style {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #8F8F91;
		}
	}

	//
	.agreement-lines-content {
		padding: 28rpx 0;
	}

	.agreement-lines {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;

		.agreement {
			flex: 0 0 auto;
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #616262;
			margin-left: 22rpx;
			display: flex;
			align-items: center;

			navigator {
				color: #049FB5;
			}
		}
	}

	//
	.price-lines {
		display: flex;
		align-items: center;
		height: 128rpx;
		background: #FFFFFF;
		padding: 0 29rpx;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;

		.prcies {
			font-size: 64rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: bold;
			color: #EF5233;

			text {
				font-size: 28rpx;
				font-weight: normal;
			}
		}

		.reserve-btn {
			background: url('https://qiniu-cdn.maeiyun.com/imgs/lvyou/yuding.png')no-repeat;
			background-size: 100% 100%;
			width: 266rpx;
			height: 87rpx;
			text-align: center;
			line-height: 87rpx;
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>